<template>
  <uni-popup
    v-show="showPrivacy"
    ref="popup"
    :is-mask-click="false"
    mask-background-color="rgba(0,0,0,0.4)"
  >
    <view class="popup-content">
      <view
        ><text class="title">{{ privacyTitle }}</text></view
      >
      <view class="desc">
        <text>{{ privacyDescStart }}: \n</text>
        <text class="desc-linK" @click="openPrivacyContract">{{
          privacyContractName
        }}</text>
        <text>\n{{ privacyDescEnd }}</text>
      </view>
      <view class="flex">
        <button
          class="btn flex-item left-btn"
          type="default"
          @click="reject"
          id="reject-btn"
        >
          拒绝
        </button>
        <button
          class="btn flex-item right-btn"
          type="primary"
          id="agree-btn"
          open-type="agreePrivacyAuthorization"
          style="margin-left: 28rpx"
          @agreeprivacyauthorization="agreeAuth"
        >
          同意
        </button>
      </view>
    </view>
  </uni-popup>
</template>
<script>
export default {
  data() {
    return {
      showPrivacy: false,
      privacyTitle: "用户隐私保护提示",
      privacyContractName: "《查看隐私协议》",
      privacyDescStart: "在你使用服务之前，请仔细阅读",
      privacyDescEnd: "如你同意该指引，请点击“同意”开始使用本小程序。",
    };
  },

  onLoad() {},
  created() {
    uni.getPrivacySetting({
      success: (res) => {

        //返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
        this.privacyContractName =
          res?.privacyContractName || "《查看隐私协议》";

        if (res.needAuthorization) {
          console.log("needAuthorization");
          console.log(res);
          // 需要弹出隐私协议
          this.showPrivacy = true;
          // 我是直接用uniapp存在本地缓存了，如果用第三方自行处理
          uni.setStorage({ key: "showPrivacy", data: true });
          this.$refs.popup.open("bottom");
        } else {
          this.hidePrivacy();
        }
      },
      fail: (err) => {
        uni.showToast({
          title: '错误',
          mask: true,
          //将值设置为 success 或者直接不用写icon这个参数
          icon: "error",
          //显示持续时间为 2秒
          duration: 5000,
        });
      },
      complete: () => {},
    });
  },
  methods: {
    async agreeAuth(e) {
      if (e?.detail?.errMsg === "agreePrivacyAuthorization:ok") {
        // 点击同意后自行处理
        console.log(e.detail);
      }
      this.hidePrivacy();
    },
    openPrivacyContract() {
      // 打开隐私协议页面
      uni.openPrivacyContract({
        success: () => {
          console.log("打开隐私协议页面");
        }, // 打开成功
        fail: () => {}, // 打开失败
        complete: () => {},
      });
    },
    reject() {
      // 点击最拒绝后我没清掉本地缓存，可根据业务需求处理
      this.showPrivacy = false;
    },
    hidePrivacy() {
      // 清掉本地缓存showPrivacy
      uni.removeStorageSync("showPrivacy");
      this.showPrivacy = false;
    },
  },
};
</script>
 
<style scoped lang='scss'>
.popup-content {
  height: 40vh;
  border-radius: 40rpx 40rpx 0 0;
  padding: 100rpx 30rpx 30rpx 30rpx;
  text-align: left;
  box-sizing: border-box;
  background-color: #fff;
}
.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  line-height: 40rpx;
}
.desc {
  font-size: 32rpx;
  color: #737373;
  line-height: 50rpx;
  margin: 30rpx auto;
}
.btn::after {
  border: none;
}
.desc-linK {
  color: #00aaff;
  line-height: 40rpx;
  margin-bottom: 30rpx;
}

.flex {
  display: flex;
  justify-content: center;

  .btn {
    width: 200rpx;
  }
}
</style>